<template>
    <div class="order-info">
       <img :src="orderInfoBg" class="order-banner">
       <div v-if="order.status ==2" class="shouhu-wenan">
           <p style="margin-bottom:.1rem">14天23小时候将自动确认收货</p>
           <p>顺丰快递：604027119934788</p>
       </div>
         <div v-if="order.status == 3" class="sucess-wenan">
           <p>顺丰快递：604027119934788</p>
       </div>
       <div class="order-person-info">
           <img src="@/assets/img/me/place.png" class="person-info-icon">
           <div class="perosn-all-info">
                <p class="person-info">收货人：{{order.address.name}}<span  style="float:right">{{order.address.telephone}}</span></p>
                <p class="person-address">收货地址：{{order.address.city}} {{order.address.detailAddress}}</p>
           </div>
       </div>
       <div class="order-money-info">
            <p class="money-info">商品名称<span  style="float:right">{{cardName}}</span></p>
            <p class="money-info">数量<span  style="float:right">{{order.buyNum}}</span></p>
            <p class="money-info">商品单价<span  style="float:right">¥{{order.originalPrice}}</span></p>
            <p class="money-info">折后单价<span  style="float:right;color:#ff2d41">¥{{order.presentPrice}}</span></p>
       </div>
       <div class="money-total">
           <p>合计总金额<span  style="float:right;color:#ff2d41">¥{{order.totalPrice}}元</span></p>
       </div>
        <div class="order-money-info">
            <p class="money-info">订单编号<span  style="float:right">{{order.orderNo}}</span></p>
            <p class="money-info">付款时间<span  style="float:right">{{order.buyTimeStr}}</span></p>
            <p class="money-info" v-if="order.status != 1 ">发货时间<span  style="float:right" >{{order.deliveryTimeStr}}</span></p>
            <p class="money-info" v-if="order.status == 3">收货时间<span  style="float:right" >{{order.takeTimeStr}}</span></p>
       </div>
        <div class="order-confirm" v-if="order.status == 2">
              <div class="order-btn" @click="confirmGet">确认收货</div>
        </div>
        <com-dialog :dialogConent="dialogConent" @rightBtn="rightBtn" v-if="showDialog" @leftBtn="leftBtn"></com-dialog>
    </div>
</template>
<script>
import comDialog from '@/components/comDialog'
import { post } from '../../../../util/http.js'
import market from '@/api/market.js'
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            order: {},
            orderInfoBg: '',
            showDialog: false,
            cardName: '',
            dialogConent: {
                title: '是否确认已收到商品？',
                left: '取消',
                right: '确认'
            }
        }
    },
    components: {
       comDialog 
    },
    mounted() {
        // 根据 ajax 请求获取订单详情  /order/orderDetail
        this.cardName = this.$route.params.cardName
        post('http://dlsapi.rz158.com/order/orderDetail', {
                    id: this.$route.params.id
                }).then(res => {
                    if(res.code == 0) {
                        this.order = res.t 
                        console.log(this.order)
                    } else {
                        Toast({
                            message: res.message,
                            duration: 1000
                        })
                    }
                })
        console.log(this.$route.params)
        console.log(this.order)
        if (this.$route.params.status == 1) {  // 待发货
            this.orderInfoBg = require('@/assets/img/me/orderinfo_get.png')
        } else if (this.$route.params.status == 2) {  // 待收货
            this.orderInfoBg = require('@/assets/img/me/orderinfo_shouhuo.png')
        } else {   // 交易成功
            this.orderInfoBg = require('@/assets/img/me/orderinfo_success.png')
        }
    },
    methods: {
        confirmGet() {
            this.showDialog = true
        },
        leftBtn() {
            this.showDialog = false
        },
        rightBtn() {
            market.sureOrder({id: this.$route.params.id}).then((res) => {
                if (res.code == 0) {
                    this.showDialog = false
                } else {
                    Toast({
                        message: res.message,
                        duration: 1000
                    })
                }
            })
            
        },
    }
}
</script>
<style lang="less" scoped>
.order-info{
    background: #efefef;
    height: 100vh;
    font-size: 0;
    .shouhu-wenan{
        position: absolute;
        top: .9rem;
        left: .9rem;
        color: #fff;
        font-size: .26rem;
    }
    .sucess-wenan{
        position: absolute;
        top: 1.2rem;
        left: .9rem;
        color: #fff;
        font-size: .26rem;
    }
    .order-banner{
        width: 100%;
        height: 2rem;
    }
    .order-person-info{
        height: 1.1rem;
        padding: .3rem;
        display: flex;
        background: #fff;
        margin-bottom: .16rem;
        .person-info-icon{
            position: relative;
            width: .4rem;
            height: .4rem;
            margin-top: .36rem;
            display: inline-block;
        }
        .perosn-all-info{
            display: inline-block;
            width: 6.35rem;
            height: 1.14rem;
            margin-left: .2rem;
            .person-info{
                font-size: .32rem;
            }
            .person-address{
                font-size: .3rem;
                padding-top: .13rem;
            }
        }
    }
    .order-money-info{
        // height: 2.54rem;
        background: #fff;
        padding: .13rem .3rem;
        .money-info{
            padding: .13rem 0rem;
            font-size: .3rem;
        }
    }
    .money-total{
        border-top: 1px solid #cccccc;
        font-size: .3rem;
        padding: .26rem .3rem;
        font-weight: bold;
        background: #fff;
        margin-bottom: .16rem;
    }
     .order-confirm{
        border-top: 1px solid #cccccc;
        height: 0.8rem;
        background: #fff;
        padding: 0rem 0.3rem;
        position: absolute;
        bottom: 0;
        width: 92%;
        overflow: hidden;
        .order-btn{
            width: 1.40rem;
            height: .52rem;
            border: 1px solid #cccccc;
            border-radius: 2px;
            line-height: .52rem;
            color: #707070;
            font-size: .26rem;
            float: right;
            text-align: center;
            margin-top: .12rem;
        }
    }
}
</style>


